<template>
	<div class="number">
		<span v-for="(e, k) in renderdata" class="bg" :class="'s_'+e" :key="k"></span>
	</div>

</template>

<script>
	const formate = (num) => (
		num < 10 ? `0${num}`.split('') : `${num}`.split('')
	);
	let timeInterval = null;
	export default {
		name: 'Number',
		props: {
			number: {
				type: Number,
			},
			length: {
				type: Number,
				default: 6
			},
			time: { //是否显示时间
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				time_count: false,
				renderdata: []
			};
		},
		created() {
			if (this.time) { // 右下角时钟
				this.setTime();
			}

		},
		beforeMount() {
			if (!this.time) {
				return this.setScore();
			}
			this.setclock();
		},
		beforeUnmount() {
			if (!this.time) {
				return;
			}
			clearTimeout(timeInterval);
		},
		methods: {
			setclock() {
				let clock = () => {
					timeInterval = setTimeout(() => {
						this.setTime();
						clock();
					}, 1000);
				};
				clock();
			},
			getTime() {
				let now = new Date();
				let hour = formate(now.getHours());
				let min = formate(now.getMinutes());
				let sec = now.getSeconds() % 2;
				let t = hour.concat(sec ? 'd' : 'd_c', min);
				return t;
			},
			setTime() {
				this.renderdata = this.getTime();
			},
			setScore() {
				let num = `${this.number}`.split('');
				for (let i = 0, len = this.length - num.length; i < len; i++) {
					num.unshift('n');
				}
				this.renderdata = num;
			}
		},
		watch: {
			number(newV, oldV) {
				this.setScore();
			}
		}
	}
</script>

<style scoped lang="less">
	.number {
		height: 24px;
		font-size: 14px;
		float: right;

		span {
			float: left;
			width: 14px;
			height: 24px;
		}

		.s_0 {
			background-position: -75px -25px;
		}

		.s_1 {
			background-position: -89px -25px;
		}

		.s_2 {
			background-position: -103px -25px;
		}

		.s_3 {
			background-position: -117px -25px;
		}

		.s_4 {
			background-position: -131px -25px;
		}

		.s_5 {
			background-position: -145px -25px;
		}

		.s_6 {
			background-position: -159px -25px;
		}

		.s_7 {
			background-position: -173px -25px;
		}

		.s_8 {
			background-position: -187px -25px;
		}

		.s_9 {
			background-position: -201px -25px;
		}

		.s_n {
			background-position: -215px -25px;
		}

		.s_d {
			background-position: -243px -25px;
		}

		.s_d_c {
			background-position: -229px -25px;
		}
	}
</style>
